<template>
  <div>
    <el-form ref="uploadForm">
      <div class="upload_style" >
      </div>
      <div class="filebox" >
         <div  class="filecontent" v-for="(item,type) in fileList" :key="type" v-show="isReadonly">
          <div class="filetype" >
            <p>{{item.TypeName}}:</p>
            <el-upload :action="fileUploadAPI" ref="upload" :multiple="multiple" :before-upload="handleBeforeUpload"  :on-error="handleError" :on-success="handleSuccess.bind(null, {'index':type,'data':item})" :show-file-list="false" :auto-upload="true" style="display: inline-block;margin-right:2px;">
              <el-button >上传</el-button>
          </el-upload>
          </div>
          <div class="filenamebox" >
           <div></div>
            <div class="filename" v-for="(name,index) in item.Files" :key="index">
               <p  @click="goPdf(name.Url)">{{name.CustomName}}</p>
              <el-button class="deletebtn" icon="el-icon-delete" @click="deleteFile(type,index,name.ID)" type="text" size="small" v-show="isDeleteShow"></el-button>
            </div>
          </div>
        </div>
           <div class="filecontent" v-for="(item,index) in fileList" :key="'info2' + index" v-show="!isReadonly">
          <div class="filetype">
            <p>{{item.TypeName}}：</p>
          </div>
          <div class="filenamebox" >
           <p v-if="item.Files.length == 0">暂无上传文档</p>
            <div v-else class="filename" v-for="(con,index) in item.Files" :key="index"  >
                
               <p @click="goPdf(con.Url)">{{con.CustomName}}</p>
            
            </div>
           
           
          </div>
        </div>
         
      </div>
    </el-form>
  </div>
</template>

<script>
import { getUpFileByMainID, remove } from '@/api/file.js';
export default {
  name: 'FileUpload',
  props: {
    multiple: { default: true },
    limit: { default: 0 },
    fileSize: { default: 5 },
    showTitle: { type: String, require: true },
    isReadonly: { type: Boolean, default: false }
  },
  data() {
    return {
      uploadType:'',
      fileUploadAPI: `${process.env.VUE_APP_BASE_API}/uploader.api`,
      fileList: '',
      isDeleteShow: true,
      isUploadShow: true,
      mainId: '',
      pcFileTypeOptions: {},
      filearr:[],
      filebox:[
        [
          
        ],
         [
         
        ],
         [
          
        ],
         [
          
        ]
      ],
    };
  },
  
  created() {
  
  },
  methods: {
    initPage(mainId, isDeleteShow, isUploadShow) {
      this.mainId = mainId;
      this.getList();
      this.isDeleteShow = isDeleteShow;
      this.isUploadShow = isUploadShow;
    },
    handleBeforeUpload(file) {
    
      // jpg/jpeg/png/gif/word/excel/pdf
      const limitSize = file.size / 1024 / 1024 > this.fileSize;
      if (limitSize) {
        this.msgError(`文件大小不能超过 ${this.fileSize} MB！`);
        return false;
      }
      return true;
    },
    handleSuccess(response, obj,fileList) {
     
      this.uploadType = response.data.FileType;
      this.filearr = response.data.Files;
      // console.log(this.filearr);
      var index = response.index;
      // console.log(index);
      var filename = obj[0].FileName;
      var fileurl = obj[0].Url;
        this.filearr.push({
          CustomName:filename,
          Type: this.uploadType,
          Url: fileurl
        });
        // console.log(this.filearr);
      this.filebox[index]=this.filearr;
      //  console.log(this.filebox);
     
      
    },
  
    handleError(err, file, fileList) {
      this.msgError('上传失败');
    },
    deleteFile(type,index, row) {
   
      this.$confirm('确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(row);
      
        if (row != null && row != '') {
          remove(row).then(response => {
            this.$nextTick(()=>{
              this.getList();
            })
            
            if (!response.success) {
              this.$message({
                message: response.msg,
                type: 'Error'
              });
              return;
            }
             
          });
        }else{
            
            this.filebox[type].splice(index, 1)
         
        }
      
      
      });
    },
    downloadFile(url) {
      window.open(url);
    },
    goPdf(url){
     
      window.open(url,'_blank')
    
    },
    getList() {
      if (this.mainId == '' || this.mainId == null) return;
      getUpFileByMainID(this.mainId).then(response => {
        // console.log(response);
        if (!response.success) {
          this.$message({
            message: response.msg,
            type: 'Error'
          });
          return;
        }
        this.fileList = response.data;
        // console.log(this.fileList);
       
        
      });
    },
    setUploadHide() {
      this.isUploadShow = false;
    },
    FileFilter(value) {
      return this.selectDictLabel(this.pcFileTypeOptions, value);
    }
  }
};
</script>
<style scoped>
@import './../assets/reset.css';
.filecontent{
  display: flex;
  justify-content: flex-start;
}

.filecontent .el-button{
  border: 1px solid #3a8ee6;
  color: #3a8ee6;
}
.filecontent .deletebtn{
  border: none;
  color: #f00;
}
.filetype{
  width: 10%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.filename{
    display: flex;
    align-items: center;
}
.filename p{
  margin-left: 10px;
  border-bottom: 1px solid #3a8ee6;
  color: #3a8ee6;
  cursor: pointer; 
}
.upload_style {
  float: right;
  margin: 10px;
}
</style>